<template>
  <el-main>
    <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
                <el-form-item>
                    <el-select v-model="searchModel.status" clearable  placeholder="请选择类型">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search(pageNo, pageSize)">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="openAddWindow()" v-if="hasPermission('sys:leave:add')">写请假条</el-button>
                </el-form-item>
    </el-form>
    <el-table :data="leaveList"  stripe style="width: 100%; margin-bottom: 10px">
                <el-table-column prop="title" label="标题" align="center" ></el-table-column>
                <el-table-column prop="content" label="内容" align="center" ></el-table-column>
                <el-table-column prop="username" label="请假人" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" ></el-table-column>
                <el-table-column prop="day" label="天数" align="center" ></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.status == '0'" size="normal">待审核</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == '1'" size="normal">已通过</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.status == '2'" size="normal">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="checkPass" label="审批人" align="center" ></el-table-column>
                <el-table-column  label="操作" align="center" >
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" type="text" size="small" @click="handleEdit(scope.row)" v-if="hasPermission('sys:leave:edit')">编辑</el-button>
                        <el-button icon="el-icon-delete" type="text" size="small" @click="handleDelete(scope.row)" v-if="hasPermission('sys:leave:delete')">删除</el-button>
                    </template>
                </el-table-column>
    </el-table>
    <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" align="center">
    </el-pagination>
    <system-dialog
        :title="leaveDialog.title"
        :visible="leaveDialog.visible"
        :width="leaveDialog.width"
        :height="leaveDialog.height"
        @onClose="onClose"
        @onConfirm="onConfirm">
        <div slot="content">
        <el-form :inline="true" :model="leave" ref="leaveForm" :rules="rules" label-width="80px">
            <br>
        <el-form-item label="标题" prop="title">
            <el-input v-model="leave.title" style="width: 300px;"></el-input>
        </el-form-item>
        <br>
            <el-form-item label="内容" prop="content">
                    <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="leave.content"
                        style="width: 600px;">
                    </el-input>
            </el-form-item>
            <el-form-item label="天数" prop="day">
            <el-input v-model="leave.day" style="width: 300px;"></el-input>
        </el-form-item>
        </el-form>
        </div>
        </system-dialog>
  </el-main>
</template>

<script>
import{getLeaveList,AddLeaveList,updateLeave,deleteLeave} from '@/api/leave';
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
export default {
name:"noticeList",
//注册组件
        components:{
            SystemDialog
        },
    data(){
        return{
            searchModel:{
                status: '',
                pageNo:'',
                pageSize:'',
            },
         options: [{value: '0',label: '待审核'}, {value: '1',label: '已通过'},{value: '2',label: '已驳回'}],   
         leaveList:[],
         leave:{
                id:'',
                title:'',
                content:'',
                day:'',
                leaveTime: '',
                createTime: '',
                username: '',
                status: '',
                checkPass: '',
                isDelete: ''
         },
         pageNo: 1, //当前页码
            pageSize: 10, //每页显示数量
            total: 0, //总数量
        //部门窗口属性
            leaveDialog: {
                title: "",
                visible: false, //是否显示
                width: 750,
                height: 350,
            },
            pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }},
          rules:{
                title: [{ required: true, trigger: "blur", message: "请输入标题"}],
                content: [{ required: true, trigger: "blur", message: "请输入内容" }],
                day: [{ required: true, trigger: "blur", message: "请输入天数" }],
                leaveTime: [{ type: 'date', required: true, message: '请选择请假时间', trigger: 'change' }]
            },
        }
    },methods:{
        //查询
        async search(pageNo=1,pageSize=10){
            this.searchModel.pageNo = pageNo;//当前页码
            this.searchModel.pageSize = pageSize;//每页显示数量
            let res = await getLeaveList(this.searchModel);
            //执行成功
            if (res.success) {
            //列表
            this.leaveList = res.data.records;
            //总数量
            this.total = res.data.total;
            }
        },
        //重置
        resetValue() {
            this.searchModel.status = '';
            this.search();
        },

        //新增
        openAddWindow(){
            //清空表单数据
                this.$resetForm("leaveForm", this.leave);
                //设置窗口标题
                this.leaveDialog.title = "写请假条";
                //显示添加部门窗口
                this.leaveDialog.visible = true;
        },
        onClose(){
            this.leaveDialog.visible = false;
        },
        onConfirm(){
            //验证表单
            this.$refs.leaveForm.validate(async (valid) => {
                let res = null;//后端返回的数据
                if (valid) {
                    //发送发布请求
                    if(this.leave.id===''){
                        res = await AddLeaveList(this.leave);
                    }else{
                        res = await updateLeave(this.leave);
                    }
                    if(res.success){
                        this.$message.success(res.message);
                        this.search();
                        //关闭窗口  
                        this.leaveDialog.visible = false;
                    }else{
                        this.$message.error(res.message);
                    }
                    //关闭窗口
                    this.leaveDialog.visible = false;
                }
            });
        },
         /**
        * 当每页数量发生变化时触发该事件
        */
        handleSizeChange(size) {
            this.pageSize = size; //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        /**
        * 当页码发生变化时触发该事件
        */
        handleCurrentChange(page) {
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
        handleEdit(row){
            //数据回显
                this.$objCopy(row, this.leave);
                //设置窗口标题
                this.leaveDialog.title = "编辑";
                //显示编辑部门窗口
                this.leaveDialog.visible = true;
        },
        async handleDelete(row){
            let confirm =await this.$myconfirm("确定要删除该数据吗?");
            if(confirm){
                let res = await deleteLeave({id:row.id})
                if(res.success){
                    this.$message.success(res.message);
                    this.search();
                }else{
                    this.$message.error(res.message);
                }
            }
        },
    },
    //初始化时调用
    created() {
        this.search()
    },
}
</script>

<style>

</style>